<template>
  <div id="MapList">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt="" class="img_zuo" @click="back" />
        <div>任务{{type===0?'接收':'下发'}}</div>
        <div class="btn-change" v-show="jb===1" @click="changeType">
          <img src="../../assets/images/rwjb_qh.png" alt="" />
          切换
        </div>
      </div>
    </header>
    <div class="tabber">
      <div class="tabber-item" @click="changeStatus(0)">
        <img src="../../assets/images/rwjb_sy.png" alt="" />
        <span :class="{'active':status===0}">{{type===0?'接收':'下发'}} {{num}}</span>
      </div>
      <div class="tabber-item" @click="changeStatus(1)">
        <img src="../../assets/images/rwjb_ww.png" alt="" />
        <span :class="{'active':status===1}">未完 {{unfinishNum}}</span>
      </div>
    </div>
    <div class="rwjb-list">

      <div class="item" v-for="(o,index) of list" @click="open(o)">
        <div class="item-icon">
          <div :class="{'wwc':o.isFinished===0,'ywc':o.isFinished==1}"></div>
        </div>
        <div class="item-content">
          <div class="hang">
            <div class="mc">
              {{jiequ(o.taskName,16,'…')}}&nbsp;
              <img v-show="o.isFinished==1" class="deng gou" src="../../assets/images/lg.png" />
              <img v-show="o.isFinished==0" class="deng" src="../../assets/images/jsd.gif" />
            </div>
            <div class="other" v-show="type!==0">{{o.num}}</div>
          </div>
          <div class="hang second">
            <div class="rwlx">{{o.taskType}}</div>
            <div class="dw">
              <img class="fz" src="../../assets/images/rwjb_fz.png" />
              {{o.postUnit}}
            </div>
            <div class="other">{{getDateFormat(o.createTime)}}</div>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>
<script>
  import { Dialog } from 'vant';
  import utils from "../../assets/js/utils.js"
  export default {
    name: "rwjb_list",
    data() {
      return {
        list: [],
        userId: null,
        jb: '',//判断区级，街道，社区 0区级1街道2社区 区级显示发文 街道和社区显示接收 1可切换,2接收
        type: '',//0接收，1发文
        status: 0,//0 所有 1 未完成
        num: 0,//总数量
        unfinishNum: 0//未完成数量
      }
    },
    methods: {
      back() {//返回
        // this.$router.push("/index");
        this.$router.back()
      },
      open(o) {//跳转任务交办表格页面
        localStorage.setItem("rwjbId", JSON.stringify(o.id));//任务交办的id
        localStorage.setItem("rwjbDwType", JSON.stringify(this.type));//单位类型 0接收，1发文
        localStorage.removeItem('ckrw_dwid');
        localStorage.removeItem('hytz_title');

        var t = $(".rwjb-list").scrollTop()
        console.log("距离：", t)
        sessionStorage.setItem("rwjb_list_scroll", t)
        if (o.taskType == '专项任务') {
          this.$router.push("/table_list");
        } else if (o.taskType == '会议通知'||o.taskType == '情况通报') {
          localStorage.setItem("hytz_title", o.taskName);
          this.$router.push("/table_listhree");
        }
      },
      jiequ(str, num, tail) {//截取字符串
        tail = tail ? ('' + tail) : '';
        if ((str || str === 0) && str.length > num) {
          str = str.substring(0, num) + tail;
        }
        return str;
      },
      getDateFormat(any_date) {//日期格式化
        return utils.dateFormat(any_date, 'MM-DD');
      },
      changeType() {//切换单位类型 发文单位或接收单位
        if (this.jb === 0 || this.jb === 1) {
          this.type = (this.type === 0) ? 1 : 0;
          this.status = 0;
          this.getList();
        }
      },
      changeStatus(status) {//切换状态 所有或未完
        this.status = status;
        this.getList();
      },
      //初始化
      init() {
        var _this = this;
        var params = {
          userId: _this.userId
        };
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log(e.message);
        }
        _this.axios.get(_this.$global_msg.Url.host + "/taskAssign/isPostOrGet", {
          params: params
        }).then(function (data) {
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log(e.message);
          }
          console.log('taskAssign/isPostOrGet:', data);
          if (data && data.data) {
            if (data.data.code == 200) {
              _this.jb = data.data.rows;
              if (_this.jb === 0) {
                _this.type = 1;
              } else {
                _this.type = 0;
              }
              //_this.type = 0;

              var rwjbDwType = localStorage.getItem("rwjbDwType");
              if (rwjbDwType) {
                _this.type = JSON.parse(rwjbDwType);
              }

              _this.status = 0;
              _this.getList();
            } else {
              _this.$toast(data.data.msg);
            }
          } else {
            _this.$toast('查询失败');
          }
        });
      },
      //查询列表
      getList() {
        var _this = this;
        _this.list = [];
        var params = {
          userId: _this.userId,
          type: _this.type,
          status: _this.status
        };
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log(e.message);
        }
        _this.axios.get(_this.$global_msg.Url.host + "/taskAssign/show", {
          params: params
        }).then(function (data) {
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log(e.message);
          }
          console.log('taskAssign/show:', data);
          if (data && data.data) {
            if (data.data.code == 200) {
              _this.list = data.data.rows.list;
              _this.num = data.data.rows.num;
              _this.unfinishNum = data.data.rows.unfinishNum;
            } else {
              _this.$toast(data.data.msg);
            }
          } else {
            _this.$toast('查询失败');
          }
        });
      },
      plusReady: function () {

      },
    },
    beforeCreate() {
      document.addEventListener("plusready", this.plusReady, false);
    },
    mounted() {
      var _this = this;



      //物理返回
      // window.addEventListener("popstate", function(){
      //   _this.back();
      // }, false);
    },
    activated() {
      // setTimeout(() => {
      //   this.$nextTick(() => {
      //     // document.querySelector('#app').scrollTop = this.offsetTop;
      //     $(".rwjb-list").scrollTop(sessionStorage.getItem("rwjb_list_scroll"))
      //   });
      // }, 10)
    },
    beforeRouteEnter(to, from, next) {
      console.log(from)
      next((vm) => {
        vm.$nextTick(function () {
          vm.userId = localStorage.getItem("userId"); //用户id
          if (from.path == "/index" || from.path == "/") {
            vm.init();
          } else {
            // vm.init();
            setTimeout(() => {
              this.$nextTick(() => {
                // document.querySelector('#app').scrollTop = this.offsetTop;
                $(".rwjb-list").scrollTop(sessionStorage.getItem("rwjb_list_scroll"))
              });
            }, 10)
          }
        });

      });
    }

  }
</script>
<style scoped>
  #MapList {
    width: 100%;
    height: 100%;
    z-index: 40;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
  }

  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    width: 100%;
    font-size: 0.388888rem;
    position: relative;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  .btn-change {
    position: absolute;
    right: 0.407407rem;
    bottom: 0;
    width: auto !important;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 0.351851rem !important;
  }

  .btn-change img {
    width: 0.361111rem;
    height: 0.361111rem;
    margin-right: 0.055555rem;
  }



  /* 列表 */
  .rwjb-list {
    flex: 1;
    width: 100%;
    background-color: #f7f7f9;
    overflow: scroll;
  }

  .rwjb-list .item {
    width: 100%;
    height: 1.851851rem;
    border-radius: 0.111111rem;
    background-color: #FFFFFF;
    display: flex;
    margin-bottom: 0.064814rem;
  }

  .rwjb-list .item:first-child {
    margin-top: 0.175925rem;
  }

  .rwjb-list .item-icon {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .rwjb-list .item-icon div {
    background-image: none;
    background-size: cover;
    width: 0.62037rem;
    height: 0.638888rem;
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
  }

  .rwjb-list .item-icon .wwc {
    background-image: url('../../assets/images/rwjb_wwc.png') !important;
  }

  .rwjb-list .item-icon .ywc {
    background-image: url('../../assets/images/rwjb_ywc.png') !important;
  }

  .rwjb-list .item-content {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .rwjb-list .item-content .hang {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.388888rem;
  }

  .rwjb-list .item-content .hang .mc {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .rwjb-list .item-content .hang .deng {
    width: 0.351851rem;
    height: 0.351851rem;
  }

  .rwjb-list .item-content .hang .gou {
    width: 0.407407rem !important;
    height: 0.407407rem !important;
  }

  .rwjb-list .item-content .hang .rwlx {
    width: 1.851851rem;
  }

  .rwjb-list .item-content .hang .dw {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .rwjb-list .item-content .hang .fz {
    width: 0.305555rem;
    height: 0.305555rem;
    margin-right: 0.185185rem;
  }

  .rwjb-list .item-content .hang .other {
    margin-right: 0.37037rem;
  }

  .rwjb-list .item-content .second {
    color: #797979;
    font-size: 0.296296rem;
  }



  /* 切换面板 */
  .tabber {
    width: 100%;
    height: auto;
    display: flex;
  }

  .tabber .tabber-item {
    flex: 1;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .tabber .tabber-item img {
    width: 0.611111rem;
    height: 0.629629rem;
    margin-bottom: 0.185185rem;
  }

  .tabber .tabber-item span {
    font-size: 0.388888rem;
  }

  .tabber .tabber-item .active {
    color: #1296db;
  }
</style>
